import React, { Component } from 'react'
import "./detail.less"
import Header from '../../components/header/header';
import { connect } from 'react-redux';
import { actions, getList, getPre, getIsshow, getNum } from "../../store/modules/detail"
import { bindActionCreators } from 'redux';

class detail extends Component {
    componentDidMount() {
        let id = this.props.match.params.id
        let { detail: { reqCate } } = this.props
        reqCate(id);
    }
    render() {
        let { info, pre, isshow, detail: { changeIsshow, changeNum, reqShop }, num } = this.props
        return (
            <div className='detail'>
                <Header text="商品详情" back></Header>
                <div className='con'>
                    {info.map((item) => {
                        return (
                            <div key={item.id}>
                                <img src={pre + item.img} alt="" />
                                <p>价格：{item.price} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;原价:{item.market_price}</p>
                                <p>{item.description}</p>
                                <p>{item.goodsname}</p>
                            </div>
                        )
                    })}
                    <div className='button'>
                        <button onClick={() => changeIsshow(!isshow)}>加入购物车</button>
                    </div>
                </div>
                {isshow ? (
                    <div className='mengban' onClick={(e) => e.target.className == "mengban" ? changeIsshow(false) : null}>
                        <div>
                            <span onClick={() => changeIsshow(false)}>X</span>
                            <p>数量：</p>
                            <p><button onClick={() => changeNum(num - 1)}>-</button><span>{num}</span><button onClick={() => { changeNum(num + 1) }}>+</button></p>
                            <button onClick={(e) => reqShop(this.props)}>加入购物车</button>
                        </div>
                    </div>
                ) : null}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        info: getList(state),
        pre: getPre(state),
        isshow: getIsshow(state),
        num: getNum(state),
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        detail: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(detail)